<template>
  <s-layout class="chat-wrap" color="#F5F5F5" navbar="inner"
            :is_main-body="true" :is_header="false"
            :customBody="customBody()" :is_mainBody="false" main-background="#F5F5F5"
            :is_back="true" backgroundColor="transparent"
            :bgStyle="{
              color: '#F5F5F5',
            }"
  >
    <view class="wh_750" style="height: 100vh;">
      <!--      <canvas canvas-id="posterCanvas"-->
      <!--              :style="{ width: config.canvasWidth+'px', height: config.canvasHeight+'px' }"-->
      <!--              class="canvas"-->
      <!--              style="position: fixed;left: -99999999rpx;"-->
      <!--      ></canvas>-->
      <view class="ancestorTop wh750 flex flex-column align-center" style="height: 900rpx;position: relative">
        <view class="hW_488"></view>
        <view class="wh_225 hW_287 pictureFrame">
          <image class="wh_225 hW_287" :src="state.data.image_input" mode="aspectFit"></image>
          <image class="wh_225 hW_287" style="position: absolute;top: 0;left: 0;"
                 :src="`${sq_image_path}/chineseSurname/sq_baizuxiangkuang.png`"></image>
        </view>
        <view class="wh_670 hW_134 flex align-center"
              style="position: absolute;bottom:0;left: 50%;transform: translateX(-50%)"
        >
          <image :src="`${sq_image_path}/chineseSurname/ancestor_flower.png`" v-if="state.data.flower > 0"
                 class="wh_134 hW_134 animation"></image>
          <image :src="`${sq_image_path}/chineseSurname/ancestor_flower.png`" v-if="state.data.flower > 1"
                 class="wh_134 hW_134"></image>
          <image :src="`${sq_image_path}/chineseSurname/ancestor_flower.png`" v-if="state.data.flower > 2"
                 class="wh_134 hW_134"></image>
          <image :src="`${sq_image_path}/chineseSurname/ancestor_flower.png`" v-if="state.data.flower > 3"
                 class="wh_134 hW_134"></image>
          <image :src="`${sq_image_path}/chineseSurname/ancestor_flower.png`" v-if="state.data.flower > 4"
                 class="wh_134 hW_134"></image>
        </view>
      </view>
      <view class="ancestorBottom wh_750 flex flex-column align-center justify-end"
            style="height: calc(100vh - 900rpx)">
        <view class="hW_27"></view>
        <view class="info_ancestor wh_332 hW_152 flex flex-column align-center justify-center"
              style="position: relative"
        >
          <view class="fs_39 fw_500 color_2C303D">
            {{ state.data.ancestors || '' }}
          </view>
          <view class="fs_22 fw_500 color_4B4B4B">
            {{ state.data.ranking && state.data.ranking > 0 ? `百家姓第${state.data.ranking}名` : '未知' }}
          </view>
          <view class="wh_39 hW_85 color_FFFFFF bg_FF4206 fs_22 fw_500 flex align-center justify-center"
                style="border-radius: 60rpx;position: absolute;right: -25rpx;top:52%;transform: translateY(-50%)"
          >
            <view class="wh_22">
              起源
            </view>
          </view>
        </view>
        <view class="hW_120"></view>
        <view class="edit_ancestor wh_718 hW_182 flex align-center justify-around">
          <view class="flex flex-column align-center" style="position: relative"
                @click.stop="worshipAncestorsAndPraise">
            <image class="wh_39 hW_35"
                   :src="state.data.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">点赞 {{ state.data.likes }}</view>
            <image :src="`${sq_image_path}/index/dianzan_gif.gif`" v-if="state.showGif" class="gif"></image>
          </view>
          <view class="wh_87 hW_87 flex flex-column align-center justify-center"
                @click.stop="presentABouquet">
            <image class="wh_44 hW_44"
                   :src="`${sq_image_path}/chineseSurname/sq_sceneShooting.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">献花</view>
          </view>
          <view class="flex flex-column align-center" @click.stop="openComment">
            <image class="wh_39 hW_35"
                   :src="`${sq_image_path}/chineseSurname/sq_leaveMessage.png`"></image>
            <view class="fs_18 fw_500 color_3B3B3B ss-m-t-5">留言 {{ state.commentTotal }}</view>
          </view>
        </view>
        <view class="hW_57"></view>
      </view>
      <!-- 顶部浮窗 -->
      <view class="wh_702 hW_167 flex align-center justify-between fixedTop" @click="goWorship"
            style="border-radius: 8rpx">
        <view class="wh_646 hW_147 ml_10 flex" style="overflow: hidden">
          <scrolling ref="scrolling" :list="state.commentList" class="flex flex-sub"></scrolling>
        </view>
        <!-- 弹幕 -->
        <view class="fs_26 color_FFFFFF fw_500 wh_26 ml_10 mr_10">
          动态详情
        </view>
      </view>

      <view class="photoDetails_comments flex align-end justify-between z_4" :style="{
        bottom:state.commentsHeight+'px'
      }" v-if="state.commentsShow" @click.stop>
        <view class="photoDetails_comments_left ml_24">
        <textarea class="photoDetails_comments_left_input"
                  v-model="state.commentsValue" :focus="state.commentsFocus"
                  @blur="commentBlur"
                  placeholder="评论" :adjust-position="false" maxlength="200" auto-height></textarea>
        </view>
        <view class="photoDetails_comments_right mr_24 flex align-center justify-center" :style="{
       background: state.commentsValue == '' ? '#9F9F9F' : '#FF6D00'
      }" @click.stop="publishComments">
          <text class="photoDetails_comments_right_text">完成</text>
        </view>
      </view>

      <view class="flex align-center justify-center"
            v-if="mp_code == appVersion"
            style="background: #F5F5F5;position: fixed;top: 0;left: 0;z-index:5;width: 100vw;height: 100vh;">
        <view class="fs_40 fw_500" style="color: #000000">该服务正在开发中，敬请期待！</view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { onLoad, onReady, onUnload } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import Scrolling from '@/pages/chineseSurname/components/scrolling.vue';

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
      'width': '750rpx',
      'position': 'fixed',
      'left': '50%',
      'top': 0,
      'transform': 'translateX(-50%)',
    };
  };
  const setImageStyle = (w, h) => {
    return {
      width: w + 'px',
      height: h + 'px',
    };
  };
  const state = reactive({
    data: {},
    model: true,
    canvasImage: '',
    showGif: false,
    timeOut: null,
    commentsShow: false,
    commentsHeight: 0,
    commentsValue: '',
    commentsFocus: false,
    commentPage: 1,
    commentPagesize: 10,
    commentList: [],
  });
  const config = reactive({
    canvasWidth: sheep.$platform.device.windowWidth,
    canvasHeight: sheep.$platform.device.windowHeight,
    posterCanvas: null,
  });
  const page = reactive({
    options: {},
  });
  const sq_image_path = computed(() => sheep.$store('AI').sq_image_path);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const scrolling = ref();
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const version = computed(() => sheep.$store('AI').version);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);

  onLoad(async (options) => {
    page.options = options;
    // #ifndef H5
    sheep.$api.surname.getSurnameDetail({ id: options.id }).then(res => {
      console.log('获取的用户信息=>', res);
      state.data = res.data;
      nextTick(() => {
        // drawPoster();
      });
    });
    // #endif
    await getComment();
  });

  onReady(() => {
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
    // nextTick(() => {
    //   drawPoster();
    // });
  });

  onMounted(async () => {
    // #ifdef H5
    const pages = getCurrentPages();
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: pages[pages.length - 1].options.id });
    state.data = data;
    await getComment();
    // #endif
  });

  onUnload(() => {
    uni.offKeyboardHeightChange(onKeyboardHeightChange);
  });

  // 获取评论
  async function getComment() {
    const { data } = await sheep.$api.surname.getSurnameComment({
      id: page.options.id,
      page: state.commentPage,
      pagesize: state.commentPagesize,
    });
    state.commentTotal = data.count;
    state.commentList = data.list;
  }

  function onKeyboardHeightChange(res) {
    const { height, duration } = res;
    // 键盘弹起
    if (height > 0) {
      state.commentsHeight = height;
    }
    // 键盘收回
    else {
      state.commentsHeight = height;
    }
  }


  function goWorship(index = 2) {
    sheep.$router.go('/pages/chineseSurname/flowersMessageRecords', { id: state.data.id, index: 2 });
  }

  async function presentABouquet() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    let { code, msg } = await sheep.$api.surname.giveFlower({ id: state.data.id });
    if (code == 1) {
      state.data.flower += 1;
      sheep.$helper.toast('献花成功');
    } else {
      sheep.$helper.toast(msg);
    }
  }

  async function worshipAncestorsAndPraise() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    const { code } = await sheep.$api.family.surnameClick({
      id: state.data.id,
    });
    if (code == 1) {
      if (!!state.timeOut) {
        clearTimeout(state.timeOut);
      }
      state.showGif = true;
      state.timeOut = setTimeout(() => {
        state.showGif = false;
        state.timeOut = null;
      }, 1000);
      state.data.likes += 1;
      state.data.is_like = 1;
    }
  }


  async function publishComments() {
    if (state.commentsValue == '') {
      sheep.$helper.toast('请输入留言内容');
      return;
    }

    let { code, msg } = await sheep.$api.surname.surnameComment({
      id: state.data.id,
      content: state.commentsValue,
    });
    if (code == 1) {
      sheep.$helper.toast('留言成功');
      uni.$emit('setWorkingArea', state.commentsValue);
      state.commentsValue = '';
      state.commentsShow = false;
      state.commentsFocus = false;
      state.data.comment++;
      state.commentTotal++
    } else {
      sheep.$helper.toast(msg);
    }
  }

  function openComment() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    state.commentsShow = true;
    nextTick(() => {
      setTimeout(() => {
        state.commentsFocus = true;
      }, 100);
    });
  }

  function commentBlur() {
    state.commentsFocus = false;
    setTimeout(()=>{
      state.commentsShow = false;
    },1000)
  }
</script>


<style scoped lang="scss">
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
  }

  .bottomBar {
    box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 0.71;
    position: absolute;
    z-index: 10;
    bottom: 46rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .centerBar {
    border: 2rpx solid #FF4206;
    border-radius: 50%;
  }

  .fixedTop {
    position: absolute;
    top: 220rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    background: rgba(0, 0, 0, 0.50);
  }


  .flower1 {
    width: 168rpx;
    height: 168rpx;
    position: absolute;
    top: 910rpx;
    left: 10%;
    transform: translateX(-50%);

    image {
      width: 168rpx;
      height: 168rpx;
    }
  }

  .flower2 {
    width: 168rpx;
    height: 168rpx;
    position: absolute;
    top: 910rpx;
    left: 25%;
    transform: translateX(-50%);

    image {
      width: 168rpx;
      height: 168rpx;
    }
  }

  .flower3 {
    width: 216rpx;
    height: 216rpx;
    position: absolute;
    top: 860rpx;
    left: 50%;
    transform: translateX(-50%);

    image {
      width: 216rpx;
      height: 216rpx;
    }
  }

  .flower4 {
    width: 168rpx;
    height: 168rpx;
    position: absolute;
    top: 910rpx;
    left: 75%;
    transform: translateX(-50%);

    image {
      width: 168rpx;
      height: 168rpx;
    }
  }

  .flower5 {
    width: 168rpx;
    height: 168rpx;
    position: absolute;
    top: 910rpx;
    left: 90%;
    transform: translateX(-50%);

    image {
      width: 168rpx;
      height: 168rpx;
    }
  }

  .gif {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 62rpx;
    height: 62rpx;
  }

  .photoDetails_comments {
    width: 750rpx;
    background: #FFFFFF;
    padding: 22rpx 0 42rpx 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    .photoDetails_comments_left {
      width: 540rpx;
      //height: 80rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 1rpx solid #707070;
      padding: 20rpx 20rpx 20rpx 20rpx;

      .photoDetails_comments_left_input {
        width: 537rpx;
        min-height: 40rpx;
        max-height: 150rpx;
      }
    }

    .photoDetails_comments_right {
      width: 115rpx;
      height: 80rpx;
      background: #9F9F9F;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      //border: 1rpx solid #707070;

      .photoDetails_comments_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
      }
    }
  }

  .ancestorTop {
    background: url($uni-bg-url-sq + '/index/canvasImage_ancestor.png') no-repeat;
    background-size: 750rpx 900rpx;

    .pictureFrame {
      position: relative;
    }
  }

  .ancestorBottom {
    background: url($uni-bg-url-sq + '/index/canvasImage_ancestorBottom.png') no-repeat;
    background-size: 750rpx calc(100vh - 900rpx);
  }

  .info_ancestor {
    background: url($uni-bg-url-sq + '/chineseSurname/ancetor_name.png') no-repeat;
    background-size: 332rpx 152rpx;
  }

  .edit_ancestor {
    background: url($uni-bg-url-sq + '/chineseSurname/ancestor_edit.png') no-repeat;
    background-size: 718rpx 182rpx;
  }

  .animation {
  }
</style>
